
      var ExampleApplication = React.createClass({
        render: function() {
          var elapsed = Math.round(this.props.elapsed  / 100);
          var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
          var message =
            'React has been successfully running for ' + seconds + ' seconds.';

          return <p>{message}</p>;
        }
      });
      var start = new Date().getTime();
      setInterval(function() {
        ReactDOM.render(
          <ExampleApplication elapsed={new Date().getTime() - start} />,
          document.getElementById('container')
        );
      }, 50);
    </script>
    <script type="text/babel">
      var TaskHead = React.createClass({
        render: function() {
          return <div className="task_head">
					<span className="task_title">{this.props.task_title}</span>
				</div>;
        }
      });
	  
	  var TaskList = React.createClass({
		  
        render: function() {
          return <div className="task_list">
				</div>;
        }
      });
	  
	  
	  var WorkAreaMenu = React.createClass({
		getInitialState: function() {
			return {hasChildTask: false};
		},  
        render: function() {
          return <div class="btn-group cl r " >
				  <button type="button" class="btn btn-danger">工作区</button>
				  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					<span class="caret"></span>
					<span class="sr-only">Toggle Dropdown</span>
				  </button>
				  <ul class="dropdown-menu">
					<li><a href="#" onclick="show_or_hide_stage('all');">默认工作区</a></li>
					<li role="separator" class="divider"></li>	
					<li><a href="#" onclick="show_or_hide_stage('urgent');"><i class="fa fa-fw icon-urgent "></i>迫切</a></li>
					<li><a href="#" onclick="show_or_hide_stage('doing');"><i class="fa fa-fw icon-doing "></i>在办</a></li>
					<li><a href="#" onclick="show_or_hide_stage('suspend');"><i class="fa fa-fw icon-pause "></i>暂停</a></li>
					<li><a href="#" onclick="show_or_hide_stage('farm-out');"><i class="fa fa-fw icon-hand "></i>委托</a></li>
					<li><a href="#" onclick="show_or_hide_stage('think');"><i class="fa fa-fw icon-think "></i>思考</a></li>
					<li><a href="#" onclick="show_or_hide_stage('question');"><i class="fa fa-fw icon-question "></i>疑问</a></li>	
					<li><a href="#" onclick="show_or_hide_stage('finish');"><i class="fa fa-fw icon-finish "></i>完成</a></li>
					<li><a href="#" onclick="show_or_hide_stage('');"><i class="fa fa-fw icon-blank "></i>无状态</a></li>
					<li role="separator" class="divider"></li>	
					<li><a href="#" onclick="show_or_hide_stage('notfinish');"><i class="fa fa-fw icon-nofinish "></i>未完成</a></li>
				  </ul>
				</div>
        }
      });
	  
       ReactDOM.render(
          <Task task_title="我的某个任务"/>,
          document.getElementById('task_view')
       );
	   
	   
    </script>